<script setup lang="ts" name="TabBarProperty">
import { TabBarProperty, THEME_LIST } from './config'
import { usePropertyForm } from '@/components/Designer/utils/index'
// 底部导航栏

const props = defineProps<{ modelValue: TabBarProperty }>()
const emit = defineEmits(['update:modelValue'])
const { formData } = usePropertyForm(props.modelValue, emit)

// 要的主题
const handleThemeChange = () => {
  const theme = THEME_LIST.find((theme) => theme.id === formData.value.theme)
  if (theme?.color) {
    formData.value.style.activeColor = theme.color
  }
}
</script>

<template>
  <div class="tab-bar">
    <!-- 表单 -->
    <ElForm :model="formData" label-width="80px">
      <ElFormItem label="主题" prop="theme">
        <ElSelect v-model="formData!.theme" @change="handleThemeChange">
          <ElOption v-for="(theme, index) in THEME_LIST" :key="index" :label="theme.name" :value="theme.id">
            <template #default>
              <div class="flex items-center justify-between">
                <SvgIcon :icon="theme.icon" :color="theme.color" />
                <span>{{ theme.name }}</span>
              </div>
            </template>
          </ElOption>
        </ElSelect>
      </ElFormItem>
      <ElFormItem label="默认颜色">
        <ColorInput v-model="formData!.style.color" />
      </ElFormItem>
      <ElFormItem label="选中颜色">
        <ColorInput v-model="formData!.style.activeColor" />
      </ElFormItem>
      <ElFormItem label="导航背景">
        <ElRadioGroup v-model="formData!.style.bgType">
          <ElRadioButton label="color">纯色</ElRadioButton>
          <ElRadioButton label="img">图片</ElRadioButton>
        </ElRadioGroup>
      </ElFormItem>
      <ElFormItem v-if="formData!.style.bgType === 'color'" label="选择颜色">
        <ColorInput v-model="formData!.style.bgColor" />
      </ElFormItem>
      <ElFormItem v-if="formData!.style.bgType === 'img'" label="选择图片">
        <UploadImage v-model="formData!.style.bgImg" width="100%" height="50px" class="min-w-200px">
          <template #tip> 建议尺寸 375 * 50 </template>
        </UploadImage>
      </ElFormItem>
      <ElText tag="p">图标设置</ElText>
      <ElText type="info" size="small"> 拖动左上角的小圆点可对其排序, 图标建议尺寸 44*44 </ElText>
      <Draggable v-model="formData.items" :limit="5">
        <template #default="{ element }">
          <div class="m-b-8px flex items-center justify-around">
            <div class="flex flex-col items-center justify-between">
              <UploadImage v-model="element.iconUrl" width="40px" height="40px" :show-delete="false" :show-btn-text="false" />
              <ElText size="small">未选中</ElText>
            </div>
            <div>
              <UploadImage v-model="element.activeIconUrl" width="40px" height="40px" :show-delete="false" :show-btn-text="false" />
              <ElText>已选中</ElText>
            </div>
          </div>
          <ElFormItem prop="text" label="文字" label-width="48px" class="m-b-8px!">
            <ElInput v-model="element.text" placeholder="请输入文字" />
          </ElFormItem>
          <ElFormItem prop="url" label="链接" label-width="48px" class="m-b-0!">
            <MallAppLinkInput v-model="element.url" />
          </ElFormItem>
        </template>
      </Draggable>
    </ElForm>
  </div>
</template>

<style lang="scss" scoped></style>
